<!--
* @author wn
* @date 2022/07/04 10:46:43
* @description: 分页组件
!-->
<template>
	<div class="xtx-pagination">
		<!-- currentPage + 1 没有完成赋值操作 currentPage++ -->
		<a
			href="javascript:;"
			:class="{ disabled: currentPage === 1 }"
			@click="changePage(currentPage - 1)"
			>上一页</a
		>
		<span v-if="pager.star > 1">...</span>
		<a
			href="javascript:;"
			v-for="i in pager.btnArray"
			:key="i"
			@click="changePage(i)"
			:class="{ active: currentPage === i }"
			>{{ i }}</a
		>
		<span v-if="pager.end < pager.pageCount">...</span>
		<a
			href="javascript:;"
			:class="{ disabled: currentPage === pager.pageCount }"
			@click="changePage(currentPage + 1)"
			>下一页</a
		>
	</div>
</template>
<script>
import { ref, computed, watch } from 'vue'
export default {
	name: 'XtxPagination',
	props: {
		total: {
			type: Number,
			required: true,
		},
		currPage: {
			type: Number,
			default: 1,
		},
		pageSize: {
			type: Number,
			default: 10,
		},
	},
	setup(props, { emit }) {
		/**
		 * 需要准备的数据
		 * 按钮的个数
		 * 当前页码
		 * 总页码
		 * 起始页
		 * 结束页
		 * 按钮数组
		 */
		// 1 按钮的个数
		const count = 5
		// 2 当前页码
		const currentPage = ref(1)
		// 3 总页码   总条数 / 每页条数  向上取整
		// 从props中获取父组件传递数据的时候，
		// 不管父组件传递的是不是响应式的数据，
		// 在接收的时候要把数据转换为响应式的，可能这就是规范吧
		const myTotal = ref(100)
		const pageSize = ref(10)
		// 通过上面 数据 计算获取 {}
		const pager = computed(() => {
			// 总页码
			const pageCount = Math.ceil(myTotal.value / pageSize.value)
			// 理想情况下 --偏移量  移动
			const offsetPage = Math.floor(count / 2)
			// 4 起始页
			let star = currentPage.value - offsetPage
			// 非理想  1 起始页 小于 1  2 结束页大于 总页码
			if (star < 1) {
				star = 1
			}
			// 5 结束页--end 由 star 计算得出
			let end = star + count - 1
			if (end > pageCount) {
				end = pageCount
				star = end - count + 1 < 1 ? 1 : end - count + 1
			}
			// 6 按钮数组
			const btnArray = []
			for (let index = star; index <= end; index++) {
				btnArray.push(index)
			}
			return { pageCount, star, end, btnArray }
		})
		// 点击 上一页  下一页 切换
		// 左右边界的限制，不作为，重复点击 1,2,3,4,5 自身
		const changePage = i => {
			if (i < 1 || i > pager.value.pageCount || i === currentPage.value) return
			currentPage.value = i
			// 通知父组件  页码改变
			emit('current-change', i)
		}
		// 监视 props变化  有变化  更新 三个响应数据  自定义不用变
		// props数据写死 不会触发  所以要  立刻执行一次
		watch(
			props,
			() => {
				currentPage.value = props.currPage
				myTotal.value = props.total
				pageSize.value = props.pageSize
			},
			{ immediate: true }
		)
		return { currentPage, pager, changePage }
	},
}
</script>
<style scoped lang="less">
.xtx-pagination {
	display: flex;
	justify-content: center;
	padding: 30px;
	a {
		padding: 5px 10px;
		border: 1px solid #e4e4e4;
		border-radius: 4px;
		margin-right: 10px;
		&:hover {
			color: @xtxColor;
		}
		&.active {
			background: @xtxColor;
			color: #fff;
			border-color: @xtxColor;
		}
		&.disabled {
			cursor: not-allowed;
			opacity: 0.4;
			&:hover {
				color: #333;
			}
		}
	}
	> span {
		margin-right: 10px;
	}
}
</style>
